<template>
  <div class="content">
    <img src="@/assets/shop/new/back.png" alt="" class="back" @click="goBack">
    <div v-if="result.length < questionList.length">
      <!-- 题干 -->
      <div class="title">{{currentQuestion.stem}}</div>
      <div class="subtitle">{{currentQuestion.desc}}</div>
      <!-- 问题区域 -->
      <div class="questionnaire_content">
        <div class="type"> <span style="color:red">*</span> 此题为{{questionType[currentQuestion.type]}}</div>
        <div class="options" v-if="currentQuestion.type == '1'">
          <van-button class="option" v-for="item in currentQuestion.options" :key="item.id" @click="radioClick(item)" :class="{'active': currentResult == item.content }">{{item.content}}</van-button>
        </div>
        <div class="options checkbox_options" v-if="currentQuestion.type == '2'">
          <van-button class="option checkbox_option" v-for="item in currentQuestion.options" :key="item.id" @click="checkBoxClick(item)" :class="{'active': currentResultCheckBox.findIndex(c=>c==item.content) > -1 }">{{item.content}}</van-button>
        </div>
        <div class="questionnaire_stem">{{currentQuestion.stem}}</div>
      </div>

      <!-- 底部 -->
      <div class="bottom">
        <!-- 导航条 -->
        <div class="item">
          <div :class="{'num':index % 2 == 0, 'ellipsis':index % 2 != 0,'active': index == currentQuestionIndex * 2,'complete': index <= Math.max(result.length -1,currentQuestionIndex) * 2 + 1 }" v-for="(item,index) in questionList.length * 2 - 1" :key="index" >
            <span v-if="index % 2 == 0"> {{indexNum(index)}}</span>
            <div v-else class="c_ellipsis"><div></div><div></div><div></div></div>
          </div>
        </div>
        <!-- 按钮 -->
        <div class="btns btns_one" v-if="currentQuestionIndex == 0">
          <van-button class="btn" @click="next" :disabled="disabled" :class="{'btn_disabled':disabled}">下一题</van-button>
        </div>
        <div class="btns" v-else>
          <van-button class="btn" @click="before">上一题</van-button>
          <van-button class="btn" @click="next" :disabled="disabled" :class="{'btn_disabled':disabled}">下一题</van-button>
        </div>
      </div>
    </div>
    <div v-else>
      <!-- 题干 -->
      <div class="title">你已完成问卷填写</div>
      <div class="subtitle">20S快速掌握，在小春科技转发赚钱的技能吧～</div>
      <div class="center">
        <div class="video">
          <img src="@/assets/shop/new/video.png" alt="" class="img">
        </div>
        <div class="steps">
          <div class="step" v-for="(step,index) in steps" :key="index">
            <div class="step_title">
              <img src="@/assets/shop/new/step.png" alt="" class="img">
              Step {{index}}：{{step.title}}
            </div>
            <div class="context">{{step.content}}</div>
          </div>
        </div>
      </div>
      <div class="end_bottom">
        <div class="btns btns_one">
          <van-button :disabled="time>0" :class="{'btn_disabled':time>0}" class="btn">开启赚钱之旅 <span v-if="time>0">（{{time}}S）</span> </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import {takeQuestion} from "@/api/api";
export default {
  data(){
    return {
      id:'',
      currentQuestionIndex: 0,
      questionList:[
        {
          type:'1',
          stem:'你期待的月收入？',
          desc:'为自己树立一个小目标，并让它达成',
          options:[
            { id:1, content:'0～1K' },
            { id:2, content:'1K～3K' },
            { id:3, content:'3K～5K' },
            { id:4, content:'5K～1W' },
            { id:5, content:'1W以上' },
          ]
        },
        {
          type:'1',
          stem:'是否有通过微信卖货的经验？',
          desc:'结合实际经验，量身赠送实操集锦',
          options:[
            { id:1, content:'曾经做过' },
            { id:2, content:'完全没做过' },
            { id:3, content:'现在正在做' },
          ]
        },
        {
          type:'1',
          stem:'你昰否有自己的货源渠道？',
          desc:'没有货源渠道可以通过1314平台选品',
          options:[
            { id:1, content:'有货源渠道' },
            { id:2, content:'没有货源渠道' },
          ]
        },
        {
          type:'2',
          stem:'你擅长销售的类目是？',
          desc:'结合喜好和特长，为你智慧推荐好物',
          options:[
            { id:1, content:'男装' },
            { id:2, content:'女装' },
            { id:3, content:'母婴' },
            { id:4, content:'食品' },
            { id:5, content:'家居' },
            { id:6, content:'美妆' },
            { id:7, content:'内衣' },
            { id:8, content:'运动服饰及饰品' },
            { id:9, content:'鞋靴' },
          ]
        },
        {
          type:'1',
          stem:'你的微信好友人数是？',
          desc:'结合顾客属性，为你智慧推荐好物',
          options:[
            { id:1, content:'不清楚' },
            { id:2, content:'0～200' },
            { id:3, content:'200～500' },
            { id:4, content:'500～1000' },
            { id:5, content:'1000以上' },
          ]
        },
      ],
      questionType:{ '1':'单选题', '2':'多选题' },
      currentResult:'',
      currentResultCheckBox:[],
      // result:[ '2','3','2',['1'],'2' ],
      result:[],
      time:20,

      steps:[
        {title:'坚持登录转发',content:'将商品推荐给客户是成交的前提。所以每天登录系统APP挑选商品转发是必须坚持的事情。'},
        {title:'建立播货微信群',content:'通过微信群将商品推荐给客户是效果最好的。所以你需要快速建立起自己的播货微信群。'},
        {title:'维护好每一位客户',content:'持续的寻找新客户、维护好老客户是店铺经营的关键，所以及时响应客户问题、妥善处理，从而赢得每一位顾客的信任至关重要。'}
      ]
    }
  },
  computed:{
    currentQuestion(){
      return this.questionList[this.currentQuestionIndex]
    },
    indexNum(){
      return function(index){
        if(index == this.currentQuestionIndex * 2){
          return Math.floor(index / 2) + 1
        }else if((this.result.length - 1) * 2 >= index){
          return '√'
        }else {
          return Math.floor(index / 2) + 1
        }
      }
    },
    disabled(){
      if(this.currentQuestion.type == 1){
        return this.currentResult == ''
      }else {
        return this.currentResultCheckBox.length <= 0
      }
    },
  },
  mounted(){

  },
  destroyed(){
    clearInterval(this.id)
  },
  methods:{
    goBack(){
      this.$router.go(-1)
    },
    radioClick(item){
      this.currentResult = item.content
    },
    checkBoxClick(item){
      let index = this.currentResultCheckBox.findIndex(c=>c==item.id)
      if(index > -1){
        if(this.currentResultCheckBox.length <= 1){
          Toast('至少选择一个')
        }else {
          this.currentResultCheckBox.splice(index,1)
        }
      }else {
        this.currentResultCheckBox.push(item.content)
      }
    },
    before(){
      this.currentQuestionIndex =  this.currentQuestionIndex - 1
      if(this.currentQuestion.type == 1){
        this.currentResult = this.result[this.currentQuestionIndex] || ''
        this.currentResultCheckBox = []
      }else if(this.currentQuestion.type == 2){
        this.currentResult = ''
        this.currentResultCheckBox = this.result[this.currentQuestionIndex] || []
      }
    },
    next(){
      let that = this
      if(this.currentQuestion.type == '1'){
        this.result[this.currentQuestionIndex] = this.currentResult
      }else if(this.currentQuestion.type == '2'){
        this.result[this.currentQuestionIndex] = this.currentResultCheckBox
      }
      if(this.currentQuestionIndex + 1 == this.questionList.length){
        takeQuestion({one: this.result[0],two:this.result[1],three:this.result[2],four:this.result[3].join(','),five:this.result[4]}).then(()=>{
          this.result = JSON.parse(JSON.stringify(this.result))
          this.id = setInterval(()=>{
            if(that.time > 0){
              that.time = that.time - 1
            }
          },1000)
        })
      }else {
        this.currentQuestionIndex =  this.currentQuestionIndex + 1
        if(this.currentQuestion.type == 1){
          this.currentResult = this.result[this.currentQuestionIndex] || ''
          this.currentResultCheckBox = []
        }else if(this.currentQuestion.type == 2){
          this.currentResult = ''
          this.currentResultCheckBox = this.result[this.currentQuestionIndex] || []
        }
      }
    }
  }
}
</script>

<style scoped>
div {
    box-sizing: border-box;
}
.content {
  background-image: url('../../assets/shop/new/questionnaireBg.png');
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;
  font-family: PingFang SC;
}
.back {
  margin-top: 30px;
  margin-left: 5%;
  width: 10px;
  height: 17px;
}
.title{
  padding-left: 5%;
  margin-top: 20px;
  font-size: 24px;
  color: #FFFFFF;
  line-height: 31px;
}
.subtitle{
  padding-left: 5%;
  font-size: 15px;
  color: #FFFFFF;
  line-height: 36px;
}

/* 中间区域 */
.questionnaire_content{
  width: 90%;
  /* height: 490px; */
  height: calc(84vh - 134px - 25px);
  margin: 10px auto;
  padding: 3.2% 4.5%;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 0 2px 2px #eee;
  position: relative;
  background-image: url('../../assets/shop/new/pepole.png');
  background-size: 27% auto;
  background-repeat: no-repeat;
  background-position: right 10px bottom;
}
/* .questionnaire_center {
  height: 490px;
  overflow: scroll;
}
.questionnaire_center::-webkit-scrollbar {
  display: none;
} */
.questionnaire_content .type {
  font-size: 14px;
  color: #000000;
  line-height: 21px;
}

.questionnaire_content .options {
  /* height: 290px; */
  height: calc(100% - 3.2% - 27% - 10px - 21px);
  margin-top: 10px;
  padding-top: 10px;
  overflow: scroll;
}
.questionnaire_content .options::-webkit-scrollbar {
  display: none;
}
/* .questionnaire_content .options {
  margin-top: 36px;
} */
.questionnaire_content .options .option {
  width: 100%;
  height: 46px;
  background: #F7F7F7;
  border-radius: 6px;
  font-size: 15px;
  color: #000000;
  border: none;
  margin-bottom: 15px;
}
.questionnaire_content .options .active {
  background: linear-gradient(90deg, #FA2C1E, #FF4050);
  box-shadow: 0px 1px 1px 0px rgba(201,67,2,0.4);
  color: #FFFFFF;
}

.questionnaire_content .checkbox_options{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.questionnaire_content .checkbox_options .checkbox_option{
  width: 48%;
}
.questionnaire_content .checkbox_options .active{
  background: #FFE5E3;
  border: 1px solid #FA2C1E;
  color: #FA2C1E;
  position: relative;
}
.questionnaire_content .checkbox_options .active::after{
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 13px;
  height: 13px;
  background-image: url('../../assets/shop/new/checkBoxActive.png');
  background-size: 100%;
  background-repeat: no-repeat;
}

.questionnaire_content .questionnaire_stem {
  position: absolute;
  bottom: 25px;
  right: 110px;
  width: 160px;
  background: #F7F7F7;
  padding: 15px;
  border-radius: 6px;
}
.questionnaire_content .questionnaire_stem::after{
  content: '';
  position: absolute;
  right: 0;
  bottom: 50%;
  transform: translateY(50%) translateX(100%);
  width: 0;
  height: 0;
  line-height: 0;
  border: 10px solid transparent;
  border-left-color: #F7F7F7;
}


/* .questionnaire_content .pepole {
  position: absolute;
  right: 2%;
  bottom: 0;
  width: 92px;
  height: 121px;
  z-index: 0;
}
.questionnaire_content .pepole .img {
  width: 100%;
} */




/* 底部 */
.bottom {
  width: 100%;
  height: 16vh;
  padding: 0 5%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-bottom: 10px;
  /* background-color: #ddd; */
}
.bottom .item {
  display: flex;
  justify-content: space-between;
  height: 24px;
}
.bottom .item .num {
  width: 24px;
  height: 24px;
  background: #E3E3E3;
  border-radius: 50%;
  font-weight: 600;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bottom .item .complete {
  background: #FA2C1E;
}
.bottom .item .active {
  background: #FA2C1E;
  color: #FFFFFF;
}

.bottom .item .ellipsis {
  width: 18px;
  height: 100%;
  background: none;
}
.ellipsis .c_ellipsis {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ellipsis .c_ellipsis div{
  width: 4px;
  height: 4px;
  background: #E3E3E3;
  border-radius: 50%;
}
.complete .c_ellipsis div {
  background: #FA2C1E;
}

.btns {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin: 10px 0;
}
.btns .btn {
  width: 46%;
  height: 46px;
  background: linear-gradient(90deg, #FA2C1E, #FF4050);
  box-shadow: 0px 2px 2px 0px rgba(201,67,2,0.4);
  border-radius: 23px;
  font-size: 16px;
  color: #FFFFFF;
  border: none;
}
.btns .btn_disabled {
  background: #FFCDBE;
}
.btns_one .btn {
  width: 100%;
}


.center {
  height: calc(90vh - 138px - 20px);
  width: 90%;
  margin: 10px auto;
  padding: 3.2% 4.5%;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 0 2px 2px #eee;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.video {
  width: 100%;
}
.video .img{
  width: 100%;
}
.steps {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.steps .step .step_title {
  display: flex;
  align-items: center;
  font-size: 16px;
  height: 40px;
}
.steps .step .step_title .img {
  width: 24px;
  margin-right: 5px;
}
.steps .step .context{
  font-size: 14px;
  line-height: 24px;
}


.end_bottom {
  width: 100%;
  height: 10vh;
  padding: 0 5%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-bottom: 10px;
}


</style>